<template>
  <div class="content-body">
    <div
      v-loading="loading"
      class="app-content"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <mobile-content
        v-if="isMore === false && isEntity === false"
        ref="content"
        :layout="layout"
        @parent-more="moreCallBack"
        @parent-entity="parentEntity"
        @fact-closeLoading="closeLoading"
      />
      <mobile-more
        v-if="isMore === true && isEntity === false"
        ref="more"
        :layout="layout"
        @callBack="menuCallBack"
        @parent-entity="parentEntity"
      />
    </div>
    <div class="app-bottom">
      <mobile-footer :layout="layout" @fact-menu="menuClick" />
    </div>
    <mobile-entity ref="entity" />
  </div>
</template>
<script>
import { queryUserDefaultLayout } from '@/api/mobile/menu';
import { saveSystemVital } from '@/api/config/config';
import MobileFooter from './components/footer';
import MobileContent from './components/content';
import MobileMore from './components/more';
import MobileEntity from './components/entity';
import { getToken } from '@/utils/auth';
export default {
  name: 'MobileIndex',
  components: { MobileFooter, MobileContent, MobileMore, MobileEntity },
  data() {
    return {
      columns: null,
      layout: null,
      moreColumn: null,
      loading: false,
      isMore: false,
      isEntity: false
    };
  },
  created() {
    if (getToken()) {
      // 已登录
      this.initLayout();
    } else {
      this.$router.push({ path: '/s/login' });
    }
  },
  methods: {
    moreCallBack(data) {
      if (undefined !== data && data !== null) {
        this.isMore = true;
        this.isEntity = false;
        this.moreColumn = data;
        this.$nextTick(() => {
          this.$refs.more.init(data, this.layout);
        });
      }
    },
    parentEntity(data) {
      if (undefined !== data && data !== null) {
        this.$refs.entity.init(data);
      }
    },
    menuCallBack(data) {
      if (undefined !== data && data !== null) {
        this.isMore = false;
        this.isEntity = false;
        this.$nextTick(() => {
          this.$refs.content.openMenu(data);
        });
      }
    },
    menuClick(menu) {
      this.isMore = false;
      this.isEntity = false;
      this.loading = true;
      this.$nextTick(() => {
        this.$refs.content.openMenu(menu.id);
      });
    },
    closeLoading() {
      this.loading = false;
    },
    saveVital() {
      saveSystemVital()
        .then(res => {})
        .catch(() => {
          console.log('记录信息失败！');
        });
    },
    initLayout() {
      queryUserDefaultLayout()
        .then(res => {
          const { data } = res;
          this.layout = data;
          this.saveVital();
        })
        .catch(() => {
          this.layout = {};
        });
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
  background: #409eff0f;
}
.app-content {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 40px;
  z-index: 1;
}
.app-bottom {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 40px;
  bottom: 0px;
  z-index: 100;
}
</style>
